<!-- AddToCart -->
<template>
  <v-layout wrap class="mt-4">
    <v-flex xs6 class="title">
      <v-btn icon outline :color="color"><v-icon color="" >{{icon}}</v-icon></v-btn>
    <span :class="color + '--text'">{{message}}</span>
    </v-flex>
    <v-flex xs6 class="text-xs-right">
      <v-btn outline v-if="goods_id !== undefined" :to="{ name: 'ShopDetail', params: { id: goods_id}}">查看商品详情</v-btn>
      <v-btn color="primary" dark :to="{ name: 'ShopCart' }">去购物车结算 <v-icon>chevron_right</v-icon></v-btn>
    </v-flex>
    <v-flex xs12 class="mt-5">
      <v-card flat>
        <v-card-title>相似商品</v-card-title>
        <v-card-text>
          <!-- dsad -->
        </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>
<script>
import { add as AddToCartAPI } from '@/api/shop/shopCart.js'
export default {
  name: 'AddToCart',
  props: {
    goods_id: {
      type: String,
      require: true
    }
  },
  data: function () {
    return {
      message: '正在加入您的购物车，请稍等...',
      icon: 'more_horiz',
      color: 'green'
    }
  },
  created: function () {
    this.handleAddToCart()
  },
  mounted: function () {},
  components: {},
  computed: {},
  methods: {
    handleAddToCart: function () {
      AddToCartAPI(this.goods_id, 1).then(res => {
        this.message = '商品加入购物车成功！'
        this.icon = 'check'
      }).catch(err => {
        this.message = err.response.data
        this.icon = 'close'
        this.color = 'red'
      })
    }
  }
}
</script>
<style scoped>
</style>
